<template>
  <div class="shortArticle">
    <Tabs v-model="tabVal" type="card" @on-click="onChangeTab">
      <TabPane label="霸屏神器" name="1" :disabled="loadingFlag" v-if="unlocking('0107080100')"></TabPane>
      <TabPane label="案场海报" name="2" :disabled="loadingFlag" v-if="unlocking('0107080200')"></TabPane>
      <TabPane label="自制海报" name="3" :disabled="loadingFlag" v-if="unlocking('0107080300')"></TabPane>
    </Tabs>
    <div class="addBtn">
      <Button
        type="primary"
        style="margin-left: 8px"
        v-if="
          (unlocking('0107080104') && tabVal == 1) ||
          (unlocking('0107080204') && tabVal == 2) ||
          (unlocking('0107080301') && tabVal == 3)
        "
        @click="exportExcel">
        导出
      </Button>
      <Button
        type="primary"
        class="createBtn"
        v-if="unlocking('0107080101') && tabVal == 1"
        @click="articleAddEdit(['add'])">
        创建霸屏神器
      </Button>

      <Button
        type="primary"
        class="createBtn"
        v-if="unlocking('0107080201') && tabVal == 2"
        @click="placardAddEdit(['add'])">
        创建案场海报
      </Button>
    </div>
    <dt-grid ref="table" :columns="columns" page :onFetch="onFetch" :cellHeight="60" />
    <preview-image
      :images="preViewImg"
      :showDownLoad="showDownLoad"
      :showIndex="showIndex"
      ref="preViewImage"></preview-image>
  </div>
</template>
<script>
  import columnOpt from './opt/columns.js'
  import bgMapMgr from '@/biz/bgMap/bgMap'
  export default {
    components: {},
    data() {
      return {
        loadingFlag: true,
        tabVal: '1',
        columns: [],
        list: [],
        preViewImg: [],
        showIndex: 0,
        showDownLoad: false,
        filterParams: ''
      }
    },
    created() {},
    mounted() {
      this.tabVal = this.$route.query.tabVal ? this.$route.query.tabVal : '1'

      if (this.tabVal == 1) {
        this.columns = columnOpt.options1(this, true)
      } else if (this.tabVal == 2) {
        this.columns = columnOpt.options2(this, true)
      } else {
        this.columns = columnOpt.options3(this, true)
      }
      this.$refs.table.fetch()
    },
    methods: {
      exportExcel() {
        if (this.tabVal == 1) {
          bgMapMgr.shortArticleExportPage(this.filterParams)
        } else if (this.tabVal == 2) {
          bgMapMgr.buildingPosterExportWebList(this.filterParams)
        } else if (this.tabVal == 3) {
          bgMapMgr.posterExportList(this.filterParams)
        }
      },
      onChangeTab(val) {
        this.tabVal = val
        if (this.tabVal == 1) {
          this.columns = columnOpt.options1(this, true)
        } else if (this.tabVal == 2) {
          this.columns = columnOpt.options2(this, true)
        } else {
          this.columns = columnOpt.options3(this, true)
        }
        this.$refs.table.fetch()
      },
      delPlacard(val) {
        this.$Modal.confirm({
          title: '删除',
          content: '<p>是否确认要删除该案场海报？</p>',
          onOk: () => {
            let params = {
              posterId: val.id
            }
            bgMapMgr.delBuildingPoster(params).then((res) => {
              this.$refs.table.fetch()
            })
          },
          onCancel: () => {
            this.$Message.info('你取消了删除。')
          }
        })
      },
      // 删除
      delShort(val) {
        this.$Modal.confirm({
          title: '删除',
          content: '<p>是否确认要删除该霸屏神器？</p>',
          onOk: () => {
            let params = {
              id: val.id
            }
            bgMapMgr.shortSrticleDeleteById(params).then((res) => {
              this.$refs.table.fetch()
            })
          },
          onCancel: () => {
            this.$Message.info('你取消了删除。')
          }
        })
      },
      // 列表数据
      onFetch(data) {
        let params = { buildingId: this.$dt.buildInfo().housesId, ...data }
        this.filterParams = params
        if (this.tabVal == 1) {
          return bgMapMgr
            .shortSrticlePage(params)
            .then((res) => {
              this.loadingFlag = false
              return res
            })
            .catch((err) => {})
        } else if (this.tabVal == 2) {
          return bgMapMgr
            .buildingPosterGetWebList(params)
            .then((res) => {
              this.loadingFlag = false

              return res
            })
            .catch((err) => {})
        } else if (this.tabVal == 3) {
          return bgMapMgr
            .posterPageList(params)
            .then((res) => {
              this.loadingFlag = false
              return res
            })
            .catch((err) => {})
        }
      },

      placardAddEdit(data) {
        if (data[0] == 'add') {
          this.$router.push({
            path: '/marketingCenter/shortArticle/placardAddEdit',
            query: { type: 'add' }
          })
        } else if (data[0] == 'edit') {
          this.$router.push({
            path: '/marketingCenter/shortArticle/placardAddEdit',
            query: { type: 'edit', id: data[1].id }
          })
        }
      },
      articleAddEdit(data) {
        if (data[0] == 'add') {
          this.$router.push({
            path: '/marketingCenter/shortArticle/addEditShort',
            query: { type: 'add' }
          })
        } else if (data[0] == 'edit') {
          this.$router.push({
            path: '/marketingCenter/shortArticle/addEditShort',
            query: { type: 'edit', id: data[1].id }
          })
        }
      },

      // zjzend
      seeBg(val) {
        this.preViewImg = []
        this.preViewImg.push(val)
        this.$refs.preViewImage.show()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .shortArticle {
    padding: 20px;
  }

  .btnSS {
    border-top: 1px #eee solid;
    padding-top: 15px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
  }
  .addBtn {
    display: flex;
    flex-direction: row-reverse;
  }
</style>
